<template>
    <van-nav-bar title="收货地址" left-arrow @click-left="onClickLeft" :fixed="true" />
    <div class="vannavbar"></div>
    <div class="address">

        <van-address-edit :area-list="areaList" :address-info="address" show-set-default show-search-result
            :area-columns-placeholder="placeholder" @save="onSave" />
        <div style=" padding: 0 7%;font-size: 16px;"> 省市区 ： {{ RecipientArea1 }}</div>
    </div>
</template>

<script>
import { areaList } from '@vant/area-data';
import { onMounted, reactive, ref, toRefs } from 'vue'
import { Toast, Dialog } from 'vant';
import { useStore } from "vuex"; // ⚪️ 引入状态管理
import { useRoute, useRouter } from "vue-router";
import { UpdateAddress } from "@/network/user";
import router from "@/router";
import {
    getToken,
    setToken,
    removeToken
} from "@/utils/auth";
export default {
    setup() {
        const store = useStore(); // 获取对象
        const state = reactive({
            token: store.state.user.token,
            indexofapp: store.state.user.indexofapp,
            areaList: areaList,
            addressInfo: {},
            placeholder: ['请选择', '请选择', '请选择'],
            chosenAddressId: '1',
            list: [],
            address: {
                id: '1',
                name: '',
                tel: '',
                addressDetail: '',
                isDefault: true,
            },
            RecipientArea1: ''
        });
        onMounted(() => {
            console.log(areaList);
            init();
        });
        // 初始化信息
        const init = () => {
            store.dispatch("GetMemberInfo", { Id: store.state.user.token.ID }).then((res) => {
                state.token = res.Data
                var RecipientArea1 = res.Data.RecipientArea1;

                var oit = JSON.parse(RecipientArea1);
                state.RecipientArea1 = oit.toString()
                // province	省份	string
                // city	城市	string
                //  county	区县	string
                state.address = {
                    id: '1',
                    name: res.Data.RecipientName1,
                    tel: res.Data.RecipientPhone1,
                    addressDetail: res.Data.RecipientAddress1,
                    province: oit[0],
                    city: oit[1],
                    county: oit[2],
                    isDefault: true,
                }
                state.placeholder = oit
            }).catch(() => { });
        };
        const onSave = (res) => {
            console.log(res);
            var oit = [res.province, res.city, res.county]
            const toast = Toast.loading({
                duration: 0,
                forbidClick: true,
                message: '正在保存中...',
            });
            // ID(string, optional): 用户ID,
            // RecipientArea1(string, optional): 收件地址,
            // RecipientAddress1(string, optional): 收件地址详情,
            // RecipientName1(string, optional): 默认收件人,
            // RecipientPhone1(string, optional): 收件电话
            var params = {
                ID: state.token.ID,
                RecipientArea1: JSON.stringify(oit),
                RecipientAddress1: res.addressDetail,
                RecipientName1: res.name,
                RecipientPhone1: res.tel,
            }
            UpdateAddress(params).then((res) => {
                if (res.Code == 0) {
                    init();
                    Dialog.alert({
                        title: '提示',
                        message: '保存成功！',
                        confirmButtonColor: '#73D56C',
                        theme: 'round-button',
                    }).then(() => { });
                } else {
                    Dialog.alert({
                        title: '提示',
                        confirmButtonColor: '#E46E6E',
                        message: res.Message + '！',
                        theme: 'round-button',
                    }).then(() => { });
                }
                init();
                toast.clear()
            });

        }
        const onRefresh = () => {
            init()
            state.isLoading = false
        }
        const onClickLeft = () => {
            router.push({ path: "/my" });
        };
        return {
            ...toRefs(state),

            onRefresh,
            onClickLeft,
            onSave,
        };
    },
};
</script>

<style scoped></style>